<!--
 * @Author: chenhuanhuan 2925102113@qq.com
 * @Date: 2024-12-11 14:31:57
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2024-12-12 09:54:46
 * @FilePath: \hbzc-groupmeal-center-web\src\components\SearchCard\index.vue
-->
<template>
  <div class="searchCard" :style="{marginBottom: marginBottom}">
    <pb-card class="connect" padding="16px 16px 0">
      <slot></slot>
      <div class="buttonSeat">
        <!-- <pb-button size="small" @click="onSearch" style="margin-right: 24px;"> 查询</pb-button>
        <pb-button size="small" plain @click="onReset">重置</pb-button> -->
      </div>
      <div class="buttonBox">
        <slot name="Button">
          <pb-button size="small" @click="onSearch" style="margin-right: 24px;"> 查询</pb-button>
          <pb-button size="small" plain @click="onReset">重置</pb-button>
        </slot>
      </div>
    </pb-card>
  </div>
</template>
<script setup lang="ts">
  import { ref, defineProps, defineEmits } from "vue"
  const props = defineProps({
    searchForm: {
      type: Object,
      default: {}
    },
    marginBottom: {
      type: Object,
      default: '16px'

    }
  })
  const emits = defineEmits(["onSearch", "onReset"]);
  const onSearch = () => {
    emits('onSearch')
  }

  const onReset = () => {
    emits('onReset')
  }
</script>



<style lang="scss" scoped>
  .searchCard {
    margin-bottom: 16px;
  }

  .connect {
    position: relative;
    display: flex;
    min-height: 68px;
  }

  .buttonSeat {
    width: 200px;
    height: 20px;
  }

  .buttonBox {
    position: absolute;
    right: 16px;
    bottom: 16px;

    display: flex;

  }
</style>
